<style>

</style>
<template>
    <img style="display: inline-block" :src="imgUrl"/>
</template>
<script>
    function readAsDataURL(url) {
        return new Promise((resolve) => {
            var xhr = new XMLHttpRequest();
            xhr.responseType = "blob"; //设定返回数据类型为Blob
            xhr.onload = function () {
                var reader = new FileReader();
                reader.onloadend = function () {
                    resolve(reader.result)
                };
                reader.readAsDataURL(xhr.response); //xhr.response就是一个Blob，用FileReader读取
            };
            xhr.open("GET", url);
            xhr.send();
        });
    }

    Rap.define('', '', function () {
        return {
            name: 'ly-qrcode',
            props: {
                text: {
                    type: String,
                    required: true
                },
                correctLevel: {
                    type: Number,
                    default: 1
                },
                size: {
                    type: Number,
                    default: 200
                },
                margin: {
                    type: Number,
                    default: 20
                },
                colorDark: {
                    type: String,
                    default: "#000000"
                },
                colorLight: {
                    type: String,
                    default: "#FFFFFF"
                },
                bgSrc: {
                    type: String,
                    default: undefined
                },
                background: {
                    type: String,
                    default: "rgba(0,0,0,0)"
                },
                backgroundDimming: {
                    type: String,
                    default: "rgba(0,0,0,0)"
                },
                logoSrc: {
                    type: String,
                    default: undefined
                },
                logoBackgroundColor: {
                    type: String,
                    default: "rgba(255,255,255,1)"
                },
                logoScale: {
                    type: Number,
                    default: 0.2
                },
                logoMargin: {
                    type: Number,
                    default: 0
                },
                logoCornerRadius: {
                    type: Number,
                    default: 8
                },
                whiteMargin: {
                    type: [Boolean, String],
                    default: true
                },
                dotScale: {
                    type: Number,
                    default: 1
                },
                autoColor: {
                    type: [Boolean, String],
                    default: true
                },
                binarize: {
                    type: [Boolean, String],
                    default: false
                },
                binarizeThreshold: {
                    type: Number,
                    default: 128
                },
                callback: {
                    type: Function,
                    default: function () {
                        return undefined;
                    }
                },
                bindElement: {
                    type: Boolean,
                    default: true
                },
                backgroundColor: {
                    type: String,
                    default: "#FFFFFF"
                },
                components: {
                    default: function () {
                        return {
                            data: {
                                scale: 1
                            },
                            timing: {
                                scale: 1,
                                protectors: false
                            },
                            alignment: {
                                scale: 1,
                                protectors: false
                            },
                            cornerAlignment: {
                                scale: 1,
                                protectors: true
                            }
                        }
                    }
                }
            },
            watch: {
                text: function () {
                    this.render();
                },
                logoSrc: function () {
                    this.render();
                },
                bgSrc: function () {
                    this.render();
                }
            },
            data: function () {
                return {
                    imgUrl: ''
                }
            },
            created: function () {
                this.render();
            },
            methods: {
                render: function () {
                    var that = this;
                    var logoImg = null;
                    var backgroundImage = null;
                    var p = Rap.promise().resolve()
                    if (this.logoSrc) {
                        p = readAsDataURL(this.logoSrc).then(function (data) {
                            logoImg = data;
                        });
                    }
                    if (this.bgSrc) {
                        p = p.then(function () {
                            return readAsDataURL(that.bgSrc).then(function (data) {
                                backgroundImage = data;
                            })
                        });
                    }
                    p.then(function () {

                        new AwesomeQR.AwesomeQR({
                            text: that.text,
                            size: that.size,
                            margin: that.margin,
                            colorDark: that.colorDark,
                            colorLight: that.colorLight,
                            backgroundColor: that.backgroundColor,
                            backgroundImage: backgroundImage,
                            backgroundDimming: that.backgroundDimming,
                            logoImage: logoImg,
                            logoScale: that.logoScale,
                            logoBackgroundColor: that.logoBackgroundColor,
                            correctLevel: that.correctLevel,
                            logoMargin: that.logoMargin,
                            logoCornerRadius: that.logoCornerRadius,
                            whiteMargin: that.whiteMargin,
                            dotScale: that.dotScale,
                            autoColor: that.autoColor,
                            binarize: that.binarize,
                            binarizeThreshold: that.binarizeThreshold,
                            components: that.components
                        })
                            .draw()
                            .then(function (dataUri) {
                                that.imgUrl = dataUri;
                            });
                    });
                }, confirm: function () {

                }
            }
        }
    });
</script>
